<template>
  <div class="page">
    <el-form label-width="80px" inline :model="searchFrom">
      <el-form-item label="患者姓名">
        <el-input v-model="searchFrom.patName"></el-input>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-select v-model="searchFrom.answer" placeholder="请选择回复状态" clearable>
          <el-option label="未回复" :value="0" />
          <el-option label="已回复" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="getFeedBack">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="patName" label="患者姓名" width="100">
      </el-table-column>
      <el-table-column prop="typeName" label="类型" width="180">
      </el-table-column>
      <el-table-column prop="questionName" label="问题名称" width="180">
      </el-table-column>
      <el-table-column prop="feedBack" label="反馈" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="answer" label="回复" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="answerTime" label="回复时间" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="mark" label="操作" width="180">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" v-if="!row.answer" @click="showAdd(row)">回复</el-button>
          <!-- <el-button type="text" class="danger" size="mini" @click="handleDelete(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- <div class="block">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageNoChange"
        :current-page.sync="page.pageNo"
        :page-size="page.pageSize"
        layout="total, prev, pager, next"
        :total="page.total">
      </el-pagination>
    </div> -->

    <el-dialog title="回复" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="正文">
          <el-input type="textarea" v-model="form.answer" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { feedBackSelect, feedBackUpdate, feedBackDelete, feedBackAdd, } from '@/api/feedBack'
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
const types = {
  // 1-公告 2-资讯 3-用药指导指南  4-检查指南  5-检验指南 、6体检指南 、7 住院指南  8 门诊指南  9医保指南
  1: '公告',
  2: '资讯',
  3: '用药指导指南',
  4: '检查指南',
  5: '检验指南',
  6: '体检指南',
  7: '住院指南',
  8: '门诊指南',
  9: '医保指南'
}
export default {
  name: 'InternetHospitalMangeFeedBack2',
  filters: {
    guideTypeFilter(val) {
      return types[val]
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  data() {
    return {
      types,
      searchFrom: {},
      loading: false,
      dialogVisible: false,
      form: {},
      tableData: [],
      page: {
        total: 0,
        pageSize: 10,
        pageNo: 1,
      },
    };
  },

  mounted() {
    this.getFeedBack()
  },

  methods: {
    getFeedBack() {
      const data = {
        // hospitalId: 1,
        page: this.page.pageNo,
        size: this.page.pageSize
      }
      feedBackSelect(data).then(res => {
        console.log(111, res)
        this.tableData = res

        // this.page.total = res.totalElements
      })
    },
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.getFeedBack();
    },
    pageNoChange(val) {
      this.page.pageNo = val;
      this.getFeedBack();
    },
    handleAvatarSuccess(res, file) {
      // this.form.imageurl = URL.createObjectURL(file.raw);
      // this.form.imageurl = this.baseApi + '/file/' + res.data.path
      this.$set(this.form, 'imageurl', this.baseApi + '/file/' + res.data.path)
    },
    beforeAvatarUpload(file) {
      const supportedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
      const isValidType = supportedTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isValidType) {
        this.$message.error('上传封面只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传封面图片大小不能超过 50MB!');
      }
      return isValidType && isLt2M;
    },
    showAdd(form = {}) {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(form))
    },
    submit() {
      this.loading = true
      feedBackUpdate(this.form).then(res => {
        this.$message.success('回复成功')
      }).finally(() => {
        this.loading = false
        this.dialogVisible = false
        this.getFeedBack()
      })
    },
    handleDelete(row) {
      const data = {
        ids: row.id
      }
      feedBackDelete(data).then(res => {
        this.$message.success('删除成功')
        this.getFeedBack()
      })
    }
  },
};
</script>

<style scoped>
.page {
  padding: 24px;
}

.danger {
  color: #f56c6c;
}

.w200 {
  width: 200px;
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 0;
}
</style>